<template>
    <div id="app">
      <el-container>
        <el-header>
          <el-button @click="showAddDialog = true">新增物资信息</el-button>
          <el-button @click="showEditDialog = true">修改物资信息</el-button>
          <el-button @click="showDeleteDialog = true">删除物资信息</el-button>
        </el-header>
        <el-main>
          <add-dialog v-if="showAddDialog"  :visible.sync="showAddDialog" />
          <edit-dialog v-if="showEditDialog" :visible.sync="showEditDialog" />
          <delete-dialog v-if="showDeleteDialog" :visible.sync="showDeleteDialog" />
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  import AddDialog from '@/components/pages/material/AddDialog.vue';
  import EditDialog from '@/components/pages/material/EditDialog.vue';
  import DeleteDialog from '@/components/pages/material/DeleteDialog.vue';
  
  export default {
    components: {
      AddDialog,
      EditDialog,
      DeleteDialog
    },
    data() {
      return {
        showAddDialog: false,
        showEditDialog: false,
        showDeleteDialog: false
      };
    }
  };
  </script>
  